<template>
    <div>
        <echartsList
            v-if="!type"
            :x_data="x_data"
            ref="myEcharts"
            :seriesList="seriesList"
            :name="name"
        ></echartsList>

        <div class="tableTab " :class="{'tab_box_fiance':!type}">
            <span
                class="tableBtn"
                :class="{ on: index == timeIdx }"
                @click="onTime(item, key, index)"
                v-for="(item, key, index) in timeType"
                :key="index"
                v-show="isQuarter != key"
                >{{ item }}</span
            >
        </div>

        <!-- 利润表  非银行金融-->
        <div class="table w1021 flex" v-if="isBank == 'nonbank'">
            <div class="tableTh tableTr flex wrap w220 right">
                <span class="tableTd">利润表(万元)</span>

                <span
                    :class="{ active_Row: activeRow == key && !type }"
                    @click="handSelect(key, item.itemInfo)"
                    v-for="(item, key, index) in nonbankData"
                    class="tableTd top"
                >
                    {{ item.title }}
                </span>
            </div>
            <div class="tableTr tableBody flex">
                <div
                    class="flex wrap w130"
                    v-for="(item, index) in datalist"
                    :key="index"
                >
                    <span class="tableTd">{{ item.rptDate | dateFrom }}</span>
                    <span
                        :class="{ active_Row: activeRow == 1 && !type }"
                        @click="handSelect(1, 'fp100000')"
                        class="orange tableTd top"
                        >{{ item.fp100000 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 2 }"
                        @click="handSelect(2, 'fp1110501')"
                        class="orange tableTd top"
                        >{{ item.fp1110501 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 3 }"
                        @click="handSelect(3, 'fp1110525')"
                        class="orange tableTd top"
                        >{{ item.fp1110525 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 4 }"
                        @click="handSelect(4, 'fp110601')"
                        class="orange tableTd top"
                        >{{ item.fp110601 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 5 }"
                        @click="handSelect(5, 'fp110701')"
                        class="orange tableTd top"
                        >{{ item.fp110701 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 6 }"
                        @click="handSelect(6, 'fp110101')"
                        class="orange tableTd top"
                        >{{ item.fp110101 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 7 }"
                        @click="handSelect(7, 'fp111401')"
                        class="orange tableTd top"
                        >{{ item.fp111401 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 8 }"
                        @click="handSelect(8, 'fp111415')"
                        class="orange tableTd top"
                        >{{ item.fp111415 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 9 }"
                        @click="handSelect(9, 'fp111501')"
                        class="orange tableTd top"
                        >{{ item.fp111501 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 10 }"
                        @click="handSelect(10, 'fp111601')"
                        class="orange tableTd top"
                        >{{ item.fp111601 | filterVal("number") }}</span
                    >

                    <span
                        :class="{ active_Row: activeRow == 11 }"
                        @click="handSelect(11, 'fp111801')"
                        class="orange tableTd top"
                        >{{ item.fp111801 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 12 }"
                        @click="handSelect(12, 'fp200000')"
                        class="orange tableTd top"
                        >{{ item.fp200000 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 13 }"
                        @click="handSelect(13, 'fp201903')"
                        class="orange tableTd top"
                        >{{ item.fp201903 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 14 }"
                        @click="handSelect(14, 'fp200903')"
                        class="orange tableTd top"
                        >{{ item.fp200903 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 15 }"
                        @click="handSelect(15, 'fp201703')"
                        class="orange tableTd top"
                        >{{ item.fp201703 | filterVal("number") }}</span
                    >

                    <span
                        :class="{ active_Row: activeRow == 16 }"
                        @click="handSelect(16, 'fp201803')"
                        class="orange tableTd top"
                        >{{ item.fp201803 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 17 }"
                        @click="handSelect(17, 'fp300000')"
                        class="orange tableTd top"
                        >{{ item.fp300000 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 18 }"
                        @click="handSelect(18, 'fp300101')"
                        class="orange tableTd top"
                        >{{ item.fp300101 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 19 }"
                        @click="handSelect(19, 'fp300313')"
                        class="orange tableTd top"
                        >{{ item.fp300313 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 20 }"
                        @click="handSelect(20, 'fp400000')"
                        class="orange tableTd top"
                        >{{ item.fp400000 | filterVal("number") }}</span
                    >

                    <span
                        :class="{ active_Row: activeRow == 21 }"
                        @click="handSelect(21, 'fp400113')"
                        class="orange tableTd top"
                        >{{ item.fp400113 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 22 }"
                        @click="handSelect(22, 'fp500000')"
                        class="orange tableTd top"
                        >{{ item.fp500000 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 23 }"
                        @click="handSelect(23, 'fp500201')"
                        class="orange tableTd top"
                        >{{ item.fp500201 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 24 }"
                        @click="handSelect(24, 'fp500101')"
                        class="orange tableTd top"
                        >{{ item.fp500101 | filterVal("number") }}</span
                    >
                </div>
            </div>
        </div>
        <!-- 利润表  非银行金融-->

        <!-- 利润表  非金融-->
        <div class="table w1021 flex" v-if="isBank == 'gen'">
            <div class="tableTh tableTr flex wrap w220 right">
                <span class="tableTd">利润表(百万元)</span>
                <span
                    :class="{ active_Row: activeRow == key && !type }"
                    @click="handSelect(key, item.itemInfo)"
                    v-for="(item, key, index) in genData"
                    class="tableTd top"
                >
                    {{ item.title }}
                </span>
            </div>
            <div class="tableTr tableBody flex">
                <div
                    class="flex wrap w130"
                    v-for="(item, index) in datalist"
                    :key="index"
                >
                    <span class="tableTd">{{ item.enddate | dateFrom }}</span>
                    <span
                        :class="{ active_Row: activeRow == 1 && !type }"
                        @click="handSelect(1, 'p110100')"
                        class="orange tableTd top"
                        >{{ item.p110100 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 2 }"
                        @click="handSelect(2, 'p110202')"
                        class="orange tableTd top"
                        >{{ item.p110202 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 3 }"
                        @click="handSelect(3, 'p110302')"
                        class="orange tableTd top"
                        >{{ item.p110302 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 4 }"
                        @click="handSelect(4, 'p120402')"
                        class="orange tableTd top"
                        >{{ item.p120402 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 5 }"
                        @click="handSelect(5, 'p120442')"
                        class="orange tableTd top"
                        >{{ item.p120442 | filterVal("number") }}</span
                    >

                    <span
                        :class="{ active_Row: activeRow == 6 }"
                        @click="handSelect(6, 'p120432')"
                        class="orange tableTd top"
                        >{{ item.p120432 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 7 }"
                        @click="handSelect(7, 'p120422')"
                        class="orange tableTd top"
                        >{{ item.p120422 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 8 }"
                        @click="handSelect(8, 'p131102')"
                        class="orange tableTd top"
                        >{{ item.p131102 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 9 }"
                        @click="handSelect(9, 'p131201')"
                        class="orange tableTd top"
                        >{{ item.p131201 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 10 }"
                        @click="handSelect(10, 'p130201')"
                        class="orange tableTd top"
                        >{{ item.p130201 | filterVal("number") }}</span
                    >

                    <span
                        :class="{ active_Row: activeRow == 11 }"
                        @click="handSelect(11, 'p130101')"
                        class="orange tableTd top"
                        >{{ item.p130101 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 12 }"
                        @click="handSelect(12, 'p130501')"
                        class="orange tableTd top"
                        >{{ item.p130501 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 13 }"
                        @click="handSelect(13, 'p130401')"
                        class="orange tableTd top"
                        >{{ item.p130401 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 14 }"
                        @click="handSelect(14, 'p130702')"
                        class="orange tableTd top"
                        >{{ item.p130702 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 15 }"
                        @click="handSelect(15, 'p140101')"
                        class="orange tableTd top"
                        >{{ item.p140101 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 16 }"
                        @click="handSelect(16, 'p140202')"
                        class="orange tableTd top"
                        >{{ item.p140202 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 17 }"
                        @click="handSelect(17, 'p160101')"
                        class="orange tableTd top"
                        >{{ item.p160101 | filterVal("number") }}</span
                    >
                </div>
            </div>
        </div>
        <!-- 利润表  非金融-->

        <!-- 利润表  银行-->
        <div class="table w1021 flex" v-if="isBank == 'bank'">
            <div class="tableTh tableTr flex wrap w220 right">
                <span class="tableTd">利润表</span>
                <span
                    :class="{
                        active_Row: activeRow == key && !type,
                        high: key == 9,
                    }"
                    @click="handSelect(key, item.itemInfo)"
                    v-for="(item, key, index) in bankData"
                    class="tableTd top"
                >
                    {{ item.title }}
                </span>
            </div>
            <div class="tableTr tableBody flex">
                <div
                    class="flex wrap w130"
                    v-for="(item, index) in datalist"
                    :key="index"
                >
                    <span class="tableTd">{{ item.enddate | dateFrom }}</span>
                    <span
                        :class="{ active_Row: activeRow == 1 && !type }"
                        @click="handSelect(1, 'bp100000')"
                        class="orange tableTd top"
                        >{{ item.bp100000 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 2 }"
                        @click="handSelect(2, 'bp110111')"
                        class="orange tableTd top"
                        >{{ item.bp110111 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 3 }"
                        @click="handSelect(3, 'bp110123')"
                        class="orange tableTd top"
                        >{{ item.bp110123 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 4 }"
                        @click="handSelect(4, 'bp110101')"
                        class="orange tableTd top"
                        >{{ item.bp110101 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 5 }"
                        @click="handSelect(5, 'bp111511')"
                        class="orange tableTd top"
                        >{{ item.bp111511 | filterVal("number") }}</span
                    >

                    <span
                        :class="{ active_Row: activeRow == 6 }"
                        @click="handSelect(6, 'bp111523')"
                        class="orange tableTd top"
                        >{{ item.bp111523 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 7 }"
                        @click="handSelect(7, 'bp110301')"
                        class="orange tableTd top"
                        >{{ item.bp110301 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 8 }"
                        @click="handSelect(8, 'bp110701')"
                        class="orange tableTd top"
                        >{{ item.bp110701 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 9 }"
                        @click="handSelect(9, 'bp110711')"
                        class="orange tableTd top high"
                        >{{ item.bp110711 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 10 }"
                        @click="handSelect(10, 'bp110801')"
                        class="orange tableTd top"
                        >{{ item.bp110801 | filterVal("number") }}</span
                    >

                    <span
                        :class="{ active_Row: activeRow == 11 }"
                        @click="handSelect(11, 'bp111101')"
                        class="orange tableTd top"
                        >{{ item.bp111101 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 12 }"
                        @click="handSelect(12, 'bp111201')"
                        class="orange tableTd top"
                        >{{ item.bp111201 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 13 }"
                        @click="handSelect(13, 'bp200000')"
                        class="orange tableTd top"
                        >{{ item.bp200000 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 14 }"
                        @click="handSelect(14, 'bp210703')"
                        class="orange tableTd top"
                        >{{ item.bp210703 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 15 }"
                        @click="handSelect(15, 'bp210303')"
                        class="orange tableTd top"
                        >{{ item.bp210303 | filterVal("number") }}</span
                    >

                    <span
                        :class="{ active_Row: activeRow == 16 }"
                        @click="handSelect(16, 'bp210503')"
                        class="orange tableTd top"
                        >{{ item.bp210503 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 17 }"
                        @click="handSelect(17, 'bp210603')"
                        class="orange tableTd top"
                        >{{ item.bp210603 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 18 }"
                        @click="handSelect(18, 'bp300000')"
                        class="orange tableTd top"
                        >{{ item.bp300000 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 19 }"
                        @click="handSelect(19, 'bp310101')"
                        class="orange tableTd top"
                        >{{ item.bp310101 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 20 }"
                        @click="handSelect(20, 'bp310203')"
                        class="orange tableTd top"
                        >{{ item.bp310203 | filterVal("number") }}</span
                    >

                    <span
                        :class="{ active_Row: activeRow == 21 }"
                        @click="handSelect(21, 'bp400000')"
                        class="orange tableTd top"
                        >{{ item.bp400000 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 22 }"
                        @click="handSelect(22, 'bp500000')"
                        class="orange tableTd top"
                        >{{ item.bp500000 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 23 }"
                        @click="handSelect(23, 'bp410203')"
                        class="orange tableTd top"
                        >{{ item.bp410203 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 24 }"
                        @click="handSelect(24, 'bp510201')"
                        class="orange tableTd top"
                        >{{ item.bp510201 | filterVal("number") }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 25 }"
                        @click="handSelect(25, 'bp510101')"
                        class="orange tableTd top"
                        >{{ item.bp510101 | filterVal("number") }}</span
                    >
                </div>
            </div>
        </div>
        <!-- 利润表  银行-->
    </div>
</template>

<script>
import { mapState } from "vuex";
const href = window.location.href;
const stock = href.match(/stock=(\w+)/);
import echartsList from "./echartsList";
import { numberNo, number, finList, changeNumber } from "../../script/api";
import { bankData, genData, nonbankData } from "./data_tab_9";
export default {
    props: {
        type: {
            type: String,
            default: "",
        },
    },
    components: {
        echartsList,
    },
    data() {
        return {
            name: "",
            activeRow: 1,
            x_data: [],
            seriesList: [],
            datalist: [],
            isBank: "", // gen: 非金融,bank:金融,nonbank:非银行金融
            timeIdx: 0, //时间区间 report-报告期，year-年报，quarter-季度
            timeType: {
                report: "按报告期",
                year: "按年度",
                quarter: "按单季度",
            },
            tabList: [
                {
                    finished: false,
                    list: [],
                },
                {
                    finished: false,
                    list: [],
                },
                {
                    finished: false,
                    list: [],
                },
            ],
            genData: genData,
            nonbankData: nonbankData,
            bankData: bankData,
        };
    },
    filters: {
        dateFrom(val) {
            return val.substring(0, 10);
        },
        filterVal(ops, num) {
            if (num == "numberNo") {
                return numberNo(ops, num);
            }
            if (num == "number") {
                return number(ops, num, 1000000);
            }
            if (num == "num") {
                return number(ops, num, 10000);
            }
            if (num == "numb") {
                return number(ops, num, 100);
            }
            if (num == "yiyuan") {
                return number(ops, num, 100000000);
            }
            return ops ? ops : "0.00";
        },
    },
    computed: {
        ...mapState(["isQuarter"]),
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            let stockCode = stock[1] || "";
            let timeInx = this.timeIdx || 0;
            let interval = Object.keys(this.timeType)[timeInx];
            if (stockCode.length > 6) {
                stockCode = stockCode.substring(2);
            } else {
                stockCode = stockCode;
            }

            finList({ stockCode, type: "income", interval }).then((res) => {
                this.tabList[timeInx].list = res.data;
                this.datalist = [...this.tabList[this.timeIdx].list];
                this.isBank = res.stockType;
               
                if (this.type) return;
                this.namechange();
                this.handleXData();
            });
        },

        namechange() {
            if (this.isBank == "gen") {
                this.name = this.genData[this.activeRow]["title"]+"（百万元）";
            }
            if (this.isBank == "nonbank") {
                this.name = this.nonbankData[this.activeRow]["title"]+"（百万元）";
            }
            if (this.isBank == "bank") {
                this.name = this.bankData[this.activeRow]["title"]+"（百万元）";
            }
        },

        handleXData() {
            this.x_data = [];
            this.seriesList = [];
            this.datalist.map((item) => {
                if (this.isBank == "nonbank") {
                    this.x_data.push(item.rptDate.substring(0, 10));
                } else {
                    this.x_data.push(item.enddate.substring(0, 10));
                }
                let y_data = 0;
                let key = null;
                if (this.isBank == "gen") {
                    //第一行数据
                    key = this.genData[this.activeRow].itemInfo;
                    y_data = changeNumber(item[key], 1000000);
                } else if (this.isBank == "nonbank") {
                    key = this.nonbankData[this.activeRow].itemInfo;
                    y_data = changeNumber(item[key], 10000);
                } else if (this.isBank == "bank") {
                    key = this.bankData[this.activeRow].itemInfo;
                    y_data = changeNumber(item[key], 1);
                }

                this.seriesList.push(y_data);
            });
            console.log("x_data", this.x_data);
            console.log("seriesList", this.seriesList);
        },
        handSelect(selectRow, key) {
            if (this.type) return;
            this.seriesList = [];
            this.activeRow = selectRow;
            this.namechange();
            this.datalist.map((item) => {
                let y_data = 0;
                if (item[key]) {
                    if (this.isBank == "bank") {
                        y_data = changeNumber(item[key], 1);
                    } else if (this.isBank == "nonbank") {
                        y_data = changeNumber(item[key], 10000);
                    } else if (this.isBank == "gen") {
                        y_data = changeNumber(item[key], 1000000);
                    }
                }
                this.seriesList.push(y_data);
            });
            console.log("this.seriesList", this.seriesList);
        },
        onTime(item, key, index) {
            this.timeIdx = index;
            this.init();
            if (this.type) return;
            this.activeRow = 1;
        },
    },
};
</script>